<template>
  <div class="PhotoList">
    <!-- 导航 -->
    <van-tabs
      v-model="active"
      @click="getImages"
    >
      <van-tab
        v-for="cat in cats"
        :key='cat.id'
        :title='cat.title'
      ></van-tab>
    </van-tabs>
    <div>
      <img
        class="img-box"
        v-for="img in images"
        v-lazy="img.img_url"
        :key="img.id"
        @click="getInfo(img.id)"
      />
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    active: 0,
    cats: [],
    images: []
  }),
  created() {
    this.getImgCategory()
    this.getImages(0)
  },
  methods: {
    async getImgCategory() {
      try {
        const { data: { message } } = await this.Api.getImgCategory()
        message.unshift({
          id: 0,
          title: '全部'
        })
        // console.log(message)
        this.cats = message
        // console.log(id)
      } catch (error) {
        console.log('请求失败')
      }
    },
    async getImages(id, title) {
      try {
        const { data: { message } } = await this.Api.getImages(id)
        console.log(id, title)
        this.images = message
      } catch (error) {
        console.log('请求失败')
      }
    },
    getInfo(id) {
      this.$router.push('/home/photoinfo/' + id)
    }
  }
}
</script>
<style lang="less" scoped>
.img-box{
  width: 98%;
  height: 100%;
}
</style>
